<script setup lang="ts">
import { OperTableItems } from "@/api/types/Operation"
import { ref } from "vue"

// 对话框显示与隐藏
const dialogVisible = ref(false)
// 详情数据
const currentInfo = ref<OperTableItems>()
// 对话框显示与隐藏事件回掉
const handleClose = () => {
    colsoeDialog()
}
// 对话框事件关闭
const colsoeDialog = () => {
  dialogVisible.value = false
}

// 操作详情
const tableInfo = (row: OperTableItems) => {
  dialogVisible.value = true
  currentInfo.value = row
}

defineProps(["tableList"])
</script>

<template>
  <div class="table">
    <el-table :data="tableList" border>
      <el-table-column label="序号" prop="num" width="80" align="center" />
      <el-table-column label="操作人" prop="name" align="center"  />
      <el-table-column label="操作内容" prop="operationContent" align="center"  />
      <el-table-column label="操作时间" width="170" prop="operationTiem" align="center"  />
      <el-table-column label="请求耗时" align="center" >
        <template #="{row}">
            <span>{{ row.responseTime }} ms</span>
        </template>
      </el-table-column>
      <el-table-column label="操作状态" prop="status" align="center" >
        <template #="{ row }">
          <el-tag effect="dark" v-if="row.status" type="success">成功</el-tag>
          <el-tag effect="dark" v-else type="danger">失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" >
        <template #="{ row }">
          <el-button
            @click="tableInfo(row)"
            icon="InfoFilled"
            type="info"
            size="small"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" width="600" :before-close="handleClose">
      <template #default>
        <el-descriptions title="操作详情">
          <el-descriptions-item label="操作序号:">{{
            currentInfo?.num
          }}</el-descriptions-item>
          <el-descriptions-item label="操作人:">{{
            currentInfo?.name
          }}</el-descriptions-item>
          <el-descriptions-item label="操作内容:">{{
            currentInfo?.operationContent
          }}</el-descriptions-item>
          <el-descriptions-item label="请求耗时:">
            {{currentInfo?.responseTime}} ms
            </el-descriptions-item>
          <el-descriptions-item label="操作状态:">
            <el-tag effect="dark" v-if="currentInfo?.status" type="success"
              >成功</el-tag
            >
            <el-tag effect="dark" v-else type="danger">失败</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="colsoeDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped></style>
